<script lang="ts">

import { ref, defineComponent, onMounted } from 'vue';
import { getBuyDeatail } from '@/api/buyDeatil'
import { useRouter, } from "vue-router"
import { useRoute } from "vue-router"
import { carListStore } from '@/stores/shopCar'
import router from '@/router';
import { toRaw } from 'vue';
import Loader from '../components/Loader.vue'

export default defineComponent({
    components: {
        Loader,
    },
    setup() {

        let title = ref('客服')
        let talkList: any = ref([{
            type: 2,
            name: '客服机器人',
            content: '你好,这里是客服机器人，有什么可以帮到你的呢?',
            img: "https://img0.baidu.com/it/u=954822816,3501119238&fm=253&fmt=auto&app=138&f=PNG?w=500&h=549",
        }])

        let send = () => {
            let my = {
                type: 1,
                name: '',
                content: talkContent.value,
                img: "https://img1.baidu.com/it/u=3394547885,955329080&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687107600&t=05f7c5c14e5130903d1f970712096f86",

            }
            const customer: any = ref({
                type: 2,
                name: '客服机器人',
                content: '',
                img: "https://img0.baidu.com/it/u=954822816,3501119238&fm=253&fmt=auto&app=138&f=PNG?w=500&h=549",
            })
            let list: any = ({
                type: 3,
                name: '客服机器人',
                content: '',
                img: "https://img0.baidu.com/it/u=954822816,3501119238&fm=253&fmt=auto&app=138&f=PNG?w=500&h=549",
            })
            talkList.value.push(my)

            if (talkContent.value.indexOf('你好') != -1) {
                customer.value.content = '你好,请问需要什么帮助呢?有什么可以帮到你呢?'
            } else if (talkContent.value.indexOf('人工') != -1) {
                customer.value.content = '正在为你转接人工服务，目前有500+人在等待人工服务，请稍等'
            } else if (talkContent.value.indexOf('推荐') != -1) {
                customer.value.content = '根据你目前观看的商品，推荐以下部分商品'
                setTimeout(() => {
                    let newArr: Array<Object> = []
                    let torowList = buyItem.value.list.slice(1)
                    torowList.forEach((item: any) => {
                        item = toRaw(item)
                        newArr.push(item)
                    })
                    list.content = newArr
                    talkList.value.push(list)
                    // console.log(talkList.value);
                }, 4000)
            } else if (talkContent.value.indexOf('当前') != -1) {
                customer.value.content = '这个是您当前所观看的商品，请问搜索结果正确吗'
                setTimeout(() => {

                    let newArr: Array<Object> = []
                    let torowList = buyItem.value.list.slice(0, 1)
                    torowList.forEach((item: any) => {
                        item = toRaw(item)
                        newArr.push(item)
                    })
                    list.content = newArr
                    talkList.value.push(list)
                    // console.log(talkList.value);
                }, 4000)
            } else if (talkContent.value.indexOf('谢谢') != -1) {
                customer.value.content = '很高兴为你服务，谢谢你的再次光临'
            }
            else {
                customer.value.content = '你输入的关键词不对，请试着输入其他关键词,例如:"人工"，"推荐商品"，"你好"'
            }
            talkContent.value = ''
            setTimeout(() => {
                title.value = '正在输入中...'

                setTimeout(() => {
                    title.value = '客服'
                    talkList.value.push(customer.value)
                }, 1000)
            }, 2000)
        }
        let talkContent = ref('')
        let route: any = useRoute();
        let router: any = useRouter();
        let showBottom = ref(false);
        let goPage = () => {
            router.back();
        }
        const addCar = () => {
            let item = {
                id: buyItem.value.list[0].goods_id,
                count: 1,
                price: buyItem.value.list[0].price,
                name: buyItem.value.list[0].name,
                img: buyItem.value.list[0].cover_img[0],
                check: false
            }
            carListStore().addCar(item)

        }
        const toBuy = (id: number) => {
            showBottom.value = false
            talkList.value.splice(1)
            getBuyDeatail({
                offset: 0,
                goods_id: id,
                count: 10
            }).then((data: any) => {
                buyItem.value = data.data
                // console.log(buyItem.value);

            })
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        }
        let buyItem = ref()

        const getBuyDeatailFun: () => void = (): void => {
            getBuyDeatail({
                offset: 0,
                goods_id: route.query.goods_id,
                count: 10
            }).then((data: any) => {

                buyItem.value = data.data
                // console.log(buyItem.value);

            })
        }
        const showShare = ref(false);
        const options = [
            [
                { name: '微信', icon: 'wechat' },
                { name: '朋友圈', icon: 'wechat-moments' },
                { name: '微博', icon: 'weibo' },
                { name: 'QQ', icon: 'qq' },
            ],
            [
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
                { name: '小程序码', icon: 'weapp-qrcode' },
            ],
        ];
        onMounted(() => {
            getBuyDeatailFun()
        })

        return {
            showBottom,
            goPage,
            showShare,
            options,
            buyItem,
            toBuy, addCar,
            route, talkContent, send, talkList, title
        }
    }
})


</script>

<template>
    <div class="buy">
        <div class="buy_title" v-if="buyItem">
            <img src="../assets/images/Detai/triver_miniapp_bar_return_dark.png" @click="goPage">
            <p class="one-txt-cut"> {{ buyItem.list[0].name }}</p>
            <img src="../assets/images/Buy/icon_share.png" @click="showShare = true">
        </div>
        <Loader v-if="!buyItem"></Loader>
        <div class="buy_con" v-if="buyItem">

            <!-- 轮播图 -->
            <van-swipe class="my-swipe item" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in buyItem.list[0].cover_img">
                    <img :src="item">
                </van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
            <div class="buy_con_bot">

                <h3>{{ buyItem.list[0].name }}</h3>
                <span></span>
                <p><u v-for="tags in buyItem.list[0].tags">{{ tags }}</u></p>
                <p><em>￥</em><i>{{ buyItem.list[0].price }}</i> 已付款{{ buyItem.list[0].sales }}</p>
            </div>
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="showBottom = true" />
                <van-action-bar-icon icon="cart-o" text="购物车" to="/ShopTrolley" />
                <van-action-bar-button type="warning" text="加入购物车" @click="addCar()" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
            <div>

            </div>
        </div>
        <!-- 商品详情 -->

        <!-- 
        弹出层 -->
        <div class="popup">
            <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '70%' }">
                <div class="popup_title">
                    <p>{{ title }}</p>
                </div>
                <div class="item"></div>

                <div class="CustomerBOx">
                    <div v-for="item in talkList" class="Customeritem">
                        <div v-if="item.type == 1 || item.type == 2" :class="[item.type == 1 ? 'my' : 'customer']">
                            <div class="imgbox"><img :src="item.img" alt=""></div>
                            <div class="textbox">
                                <p>{{ item.name }}</p>
                                <p :class="['content', item.type == 1 ? 'my' : '']">
                                    {{ item.content }}
                                </p>
                            </div>
                        </div>
                        <!-- v-for="pic in item.content" -->
                        <div v-else class="customer">
                            <div class="imgbox"><img :src="item.img" alt=""></div>
                            <div class="textbox">
                                <p>{{ item.name }}</p>
                                <div class="imgboxitem">
                                    <div class="commentitem" v-for="pic in item.content">
                                        <div class="itemimgbox">
                                            <img @click="toBuy(pic.goods_id)" :src="pic.cover_img[0]" alt="">
                                        </div>
                                        <div class="itemtextbox ">
                                            <p class="one-txt-cut">{{ pic.name }}</p>
                                            <p class="shop"><span>￥{{ pic.price }}</span>
                                                <span v-if="pic.goods_id == buyItem.list[0].goods_id"
                                                    @click="addCar()">加入购物车</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottominput">
                    <input class="text" type="text" placeholder="有什么想问客服的呢?" @keyup.enter="send" v-model="talkContent">
                </div>

            </van-popup>

            <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
        </div>

        <!-- 看你喜欢 -->
        <div class="maylove" v-if="buyItem">
            <div class="mayloveitem" v-for="item in buyItem.list.slice(1)">
                <img :src="item.cover_img[0]" alt="" @click="toBuy(item.goods_id)">
                <div class="buy_con_bot">
                    <h3 class="txt-cut">{{ item.name }} </h3>
                    <span></span>
                    <p><u v-for="tags in item.tags">{{ tags }}</u></p>
                    <p><em>￥</em><i>{{ item.price }}</i></p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.shop {
    display: flex;
    justify-content: space-between;

    span {
        &:nth-child(2) {
            margin-right: 10px;
            background-color: #e68f1e;
            color: white;
            padding: 2px 5px;
            border-radius: 10px;
        }
    }
}

.imgboxitem {
    background-color: #faf4f4;
    border-radius: 5px;

    .commentitem {
        display: flex;
        padding: 15px 10px;
        box-sizing: border-box;

        .itemimgbox {
            width: 80px;
            height: 80px;
            border-radius: 10px;
        }

        .itemtextbox {
            display: flex;
            flex-direction: column;
            max-width: 190px;
            margin-left: 10px;
            justify-content: space-around;

            p {
                font-size: 12px;

                &:nth-child(2) {
                    font-size: 15px;
                    color: rgb(255, 102, 0);
                }
            }

        }
    }

}

.CustomerBOx {
    min-height: 55.1vh
}

.bottominput {
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    bottom: 0px;
    background-color: #dcdfdd;
    padding: 10px;

    .text {
        width: 100%;
        margin: 0 auto;
        height: 35px;
    }

}

.customer {

    width: 90%;
    margin-left: 10px;

    margin-bottom: 20px;

    .imgbox {
        float: left;
        width: 35px;
        height: 35px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 999%;
        }
    }

    .textbox {

        margin-left: 10px;
        display: flex;
        flex-direction: column;

        .content {
            margin-top: 10px;
            background-color: #faf4f4;
            border-radius: 10px;
            padding: 10px;
        }

    }

}



.my {
    margin-right: 10px;
    margin-bottom: 20px;
    text-align: right;

    .imgbox {
        float: right;
        width: 35px;
        height: 35px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 999%;
        }
    }



    .textbox {
        margin-left: 10px;
        flex-direction: column;

        p {
            &:nth-child(1) {

                display: none;
            }
        }

        .content {
            margin-top: 10px;
            background-color: #faf4f4;
            border-radius: 10px;
            padding: 10px;
            text-align: right;
            display: inline-block;
        }

    }

}

.popup_title {
    background-color: #fff;
}



.van-action-bar {
    position: sticky;
}

.maylove {
    // height: 100px;
    display: flex;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .buy_con_bot {
        padding: 0px 12px;
        padding-top: 10px;
        padding-bottom: 20px;
        background-color: #fff;

        h3 {
            font-size: 14px;
            font-weight: 300;
        }

        span {
            padding: 2px 0px 2px 65px;
            margin: 8px 0px;
            display: inline-block;
            background: url("../assets/images/Buy/ic_find_wiki_ranking.png") no-repeat;
            background-size: 65px;
            font-size: 12px;
            border-radius: 3px;
            color: #ce9a57;
            background-color: #f7eedf;
            height: 15px;
        }

        p {
            font-size: 12px;
            color: #9c9c9c;
            margin-bottom: 5px;

            u {
                text-decoration: none;
                margin-left: 5px;
                background-color: #dcdfdd;
                padding: 0 5px;

            }
        }

        p em {
            font-size: 12px;
            color: #b6283c;
        }

        p i {
            margin-right: 8px;
            font-size: 18px;
            color: #b6283c;
        }
    }

    .mayloveitem {
        width: 49%;
        padding-bottom: 10px;
        border-radius: 5px;

        img {
            width: 100%;
            height: auto;
        }
    }
}

.buy {
    background-color: #f6f6f6;
    min-height: 100vh;
    position: relative;

    .userarlist {
        margin: 20px 0px;
        padding: 8px 0px;
        text-align: center;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        color: #000;
    }

    .loadingio-spinner-cube-fwf48mahvl {
        // margin: 0 auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
    }
}

.buy_title {
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;

    img {
        width: 30px;
        height: 30px;
        display: block;
    }
}

.custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 15px;
    font-size: 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.buy_con_bot {
    padding: 0px 12px;
    padding-top: 10px;
    padding-bottom: 20px;
    background-color: #fff;

    h3 {
        font-size: 18px;
        font-weight: 300;
    }

    span {
        padding: 2px 0px 2px 65px;
        margin: 8px 0px;
        display: inline-block;
        background: url("../assets/images/Buy/ic_find_wiki_ranking.png") no-repeat;
        background-size: 65px;
        font-size: 12px;
        border-radius: 3px;
        color: #ce9a57;
        background-color: #f7eedf;
        height: 15px;
    }

    p {
        font-size: 12px;
        color: #9c9c9c;
        margin-bottom: 5px;

        u {
            text-decoration: none;
            margin-left: 5px;
            background-color: #dcdfdd;
            padding: 0 5px;

        }
    }

    p em {
        font-size: 12px;
        color: #b6283c;
    }

    p i {
        margin-right: 8px;
        font-size: 18px;
        color: #b6283c;
    }
}

.buy_review {
    margin-top: 10px;
    padding: 0px 12px;
    padding-top: 10px;
    background-color: #fff;

    &>span {
        margin: 10px 0px;
        padding: 5px 15px;
        display: inline-block;
        border-radius: 20px;
        font-size: 14px;
        background-color: #e9e9e9;
    }
}

.buy_review_title {
    display: flex;
    justify-content: space-between;

    h3 {
        font-size: 17px;
        font-weight: 500;
    }

    span {
        font-size: 14px;
        color: #969696;

        img {
            width: 15px;
            height: 15px;
            display: inline-block;
            vertical-align: -2px;
        }
    }
}

.userarticle {
    padding: 10px 0px;
    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
}

.userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .user {
        display: flex;
        justify-content: space-between;
        flex: 1;
        align-items: center;

        .UserIcon {
            width: 42px;
            border-radius: 4px;
            overflow: hidden;
        }

        .info {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            flex: 1;

            h3 {
                font-weight: bold;
                font-size: 14px;
            }

            p {
                font-size: 12px;
                color: #c0c0c2;
            }

        }
    }
}

.articlecontent {

    h3 {
        font-size: 14px;
        font-weight: bold;
        line-height: 22px;
    }

    p {
        font-size: 14px;
        line-height: 22px;
    }
}

.Trends-ImgBox {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
    position: relative;

    .mask {
        position: absolute;
        height: 108px;
        width: 108px;
        background-color: rgba(0, 0, 0, 0.5);
        right: 6px;
        border-radius: 5px;

        .num {

            p {
                margin: 40px auto;
                text-align: center;
                font-size: 25px;
                color: #f3f1f1;
            }
        }
    }


    img {
        height: 108px;
        width: 108px;
        border-radius: 4px;
    }

}

.fotter {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    box-sizing: border-box;

    input {
        padding: 10px;
        border-radius: 999px;
        outline: none;
        border: 0;
        background-color: #f7f7fb;
    }
}

.productdetails {
    margin-top: 10px;
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    height: 40px;
    line-height: 40px;

    span {
        padding-right: 20px;
        background: url('../assets/images/Buy/circle_home_arrow.png') no-repeat;
        background-size: 20px;
        background-position: 30px 10px;
        color: #787878;
    }
}

.popup {
    .item {
        margin-top: 40px;
        width: 100%;
    }

    & :deep(.van-share-sheet__options) {
        justify-content: space-evenly;
    }
}

.popup_title {
    position: fixed;
    padding: 0px 12px;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;

    img {
        position: absolute;
        top: 10px;
        right: 25px;
        width: 20px;
        height: 20px;
    }
}
</style>